<template>
  <div class="pending-recruiters">
    <a-card title="待审核招聘者" :bordered="false" class="recruiters-card">
      <template #title>
        <div class="card-title">
          <audit-outlined />
          <span>待审核招聘者</span>
        </div>
      </template>
      <template #extra>
        <a-input-search
          v-model:value="searchText"
          placeholder="搜索公司或招聘者"
          style="width: 250px"
          @search="handleSearch"
        />
      </template>

      <a-table
        :columns="pendingRecruitersColumns"
        :data-source="filteredRecruiters"
        :pagination="{ pageSize: 10 }"
        :loading="tableLoading"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space>
              <a-button type="primary" size="small" @click="showApproveModal(record)">
                通过
              </a-button>
              <a-button danger size="small" @click="showRejectModal(record)"> 拒绝 </a-button>
              <a-button type="link" size="small" @click="viewDetails(record)"> 详情 </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 详情弹窗 -->
    <a-modal v-model:visible="detailModalVisible" title="招聘者详情" :footer="null" width="700px">
      <template v-if="selectedRecruiter">
        <a-descriptions bordered :column="2">
          <a-descriptions-item label="公司名称" span="2">
            {{ selectedRecruiter.belongingCompany }}
          </a-descriptions-item>
          <a-descriptions-item label="招聘者姓名">
            {{ selectedRecruiter.userName }}
          </a-descriptions-item>
          <a-descriptions-item label="邮箱">
            {{ selectedRecruiter.email }}
          </a-descriptions-item>
          <a-descriptions-item label="账号">
            {{ selectedRecruiter.userAccount }}
          </a-descriptions-item>
          <a-descriptions-item label="联系电话">
            {{ selectedRecruiter.phone || '未提供' }}
          </a-descriptions-item>
          <a-descriptions-item label="申请时间" span="2">
            {{ selectedRecruiter.createTime }}
          </a-descriptions-item>
          <a-descriptions-item label="性别" span="2">
            {{
              selectedRecruiter.gender === 0 ? '男' : selectedRecruiter.gender === 1 ? '女' : '未知'
            }}
          </a-descriptions-item>
        </a-descriptions>

        <div class="action-buttons">
          <a-button type="primary" @click="showApproveModal(selectedRecruiter)">
            通过申请
          </a-button>
          <a-button danger style="margin-left: 8px" @click="showRejectModal(selectedRecruiter)">
            拒绝申请
          </a-button>
          <a-button style="margin-left: 8px" @click="detailModalVisible = false"> 关闭 </a-button>
        </div>
      </template>
    </a-modal>

    <!-- 通过申请确认弹窗 -->
    <a-modal
      v-model:visible="approveModalVisible"
      title="确认通过"
      @ok="handleApprove"
      :confirmLoading="confirmLoading"
    >
      <p>确定通过该招聘者的申请吗？</p>
    </a-modal>

    <!-- 拒绝申请确认弹窗 -->
    <a-modal
      v-model:visible="rejectModalVisible"
      title="确认拒绝"
      @ok="handleReject"
      :confirmLoading="confirmLoading"
    >
      <p>确定拒绝该招聘者的申请吗？</p>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { AuditOutlined } from '@ant-design/icons-vue'
import {
  examineRecruiterUsingGet,
  viewExamineRecruiterAccountUsingGet,
} from '@/api/commonController'

// 表格加载状态
const tableLoading = ref(false)
const confirmLoading = ref(false)

// 搜索文本
const searchText = ref('')

// 待审核招聘者表格列
const pendingRecruitersColumns = [
  {
    title: '公司名称',
    dataIndex: 'belongingCompany',
    key: 'belongingCompany',
  },
  {
    title: '招聘者姓名',
    dataIndex: 'userName',
    key: 'userName',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
  },
  {
    title: '申请时间',
    dataIndex: 'createTime',
    key: 'createTime',
    sorter: (a, b) => new Date(a.createTime).getTime() - new Date(b.createTime).getTime(),
  },
  {
    title: '操作',
    key: 'action',
  },
]

// 待审核招聘者数据
const pendingRecruiters = ref([])

// 筛选后的招聘者列表
const filteredRecruiters = computed(() => {
  if (!searchText.value) return pendingRecruiters.value

  const lowerSearchText = searchText.value.toLowerCase()
  return pendingRecruiters.value.filter(
    (item) =>
      item.belongingCompany.toLowerCase().includes(lowerSearchText) ||
      item.userName.toLowerCase().includes(lowerSearchText) ||
      item.email.toLowerCase().includes(lowerSearchText) ||
      item.userAccount.toLowerCase().includes(lowerSearchText)
  )
})

// 弹窗状态
const approveModalVisible = ref(false)
const rejectModalVisible = ref(false)
const detailModalVisible = ref(false)
const selectedRecruiter = ref<any>(null)

// 显示审批通过弹窗
const showApproveModal = (record) => {
  selectedRecruiter.value = record
  approveModalVisible.value = true
}

// 显示拒绝弹窗
const showRejectModal = (record) => {
  selectedRecruiter.value = record
  rejectModalVisible.value = true
}

// 查看详情
const viewDetails = (record) => {
  selectedRecruiter.value = record
  detailModalVisible.value = true
}

// 处理搜索
const handleSearch = () => {
  // 已通过计算属性实现
}

// 通过招聘者审核
const handleApprove = async () => {
  if (!selectedRecruiter.value) return

  confirmLoading.value = true
  try {
    const res = await examineRecruiterUsingGet({
      userId: selectedRecruiter.value.id,
      isPassed: 2,
    })

    if (res.code === 0) {
      message.success('已通过该招聘者申请')
      await fetchPendingRecruiters() // 刷新列表
    } else {
      message.error(res.message || '操作失败')
    }
  } catch (error) {
    message.error('操作失败，请重试')
    console.error(error)
  } finally {
    confirmLoading.value = false
    approveModalVisible.value = false
  }
}

// 拒绝招聘者审核
const handleReject = async () => {
  if (!selectedRecruiter.value) return

  confirmLoading.value = true
  try {
    const res = await examineRecruiterUsingGet({
      userId: selectedRecruiter.value.id,
      isPassed: 1,
    })

    if (res.code === 0) {
      message.success('已拒绝该招聘者申请')
      await fetchPendingRecruiters() // 刷新列表
    } else {
      message.error(res.message || '操作失败')
    }
  } catch (error) {
    message.error('操作失败，请重试')
    console.error(error)
  } finally {
    confirmLoading.value = false
    rejectModalVisible.value = false
  }
}

//获取需要审核的招聘者账号
const fetchPendingRecruiters = async () => {
  tableLoading.value = true
  try {
    const res = await viewExamineRecruiterAccountUsingGet()
    if (res.code === 0 && res.data) {
      // 只显示待审核的招聘者
      pendingRecruiters.value = res.data.filter((item) => item.isPassed === 0)
    } else {
      message.error(res.message || '获取待审核招聘者失败')
    }
  } catch (error) {
    message.error('获取待审核招聘者失败')
    console.error(error)
  } finally {
    tableLoading.value = false
  }
}

onMounted(async () => {
  await fetchPendingRecruiters()
})
</script>

<style scoped>
.pending-recruiters {
  padding: 24px;
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
}

.recruiters-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.action-buttons {
  margin-top: 24px;
  text-align: right;
}
</style>
